import Taro from "@tarojs/taro";
import { Text, View } from "@tarojs/components";
import { cva } from "class-variance-authority";

import ByRow from "@/components/ui/ByRow";
import Card from "@/components/common/Card";
import ByIcon from "@/components/ui/ByIcon";
import ByText from "@/components/ui/ByText";
import BySquare from "@/components/ui/BySquare";

import useEnum from "@/hooks/useEnum";

import { CustomerItem } from "..";

// 意向客户状态,0-意向状态1-设计状态2-施工状态3-售后状态
const enumTypes = [
  { label: "资源", value: -1, color: "warning" },
  { label: "意向", value: 0, color: "error" },
  { label: "设计", value: 1, color: "primary" },
  { label: "施工", value: 2, color: "warning" },
  { label: "完工", value: 3, color: "success" },
];

const cla = cva("relative bg-primary text-white z-10", {
  variants: {
    type: {
      error: "bg-error",
      primary: "bg-primary",
      warning: "bg-warning",
      success: "bg-success",
    },
  },
});

export default ({ source }: { source: CustomerItem }) => {
  const {
    draftCustomerId,
    // 非意向客户（即资源客户）没有intentCustomerId
    intentCustomerId,
    // isIntentCustomer,
    intentCustomerState,
  } = source;

  const { getOption } = useEnum(enumTypes);

  const tagConfig = getOption(
    intentCustomerId === 0 ? -1 : intentCustomerState
  );

  return (
    <View
      className="flex items-center mb-3"
      onClick={() =>
        Taro.navigateTo({
          url: `/packageProject/pages/detail/index?intentCustomerId=${intentCustomerId}&draftCustomerId=${draftCustomerId}`,
        })
      }
    >
      <BySquare
        className={cla({ type: tagConfig?.color || "primary" })}
        size={90}
      >
        {tagConfig?.label}
      </BySquare>

      <Card className="flex-auto -ml-[46px]">
        <View className="ml-6">
          <View className="flex justify-between">
            <Text className="font-bold text-lg">{source.customerName}</Text>
            {/* <View className="flex-center min-w-[30px] h-[30px] px-1 bg-error rounded-full text-xs text-white">
              12
            </View> */}
          </View>

          <ByText size="sm" type="second">
            {source.decorationFullAddress}
          </ByText>

          <ByRow content="between" align="center" className="mt-1">
            <View>
              <ByText size="sm" type="second">
                摩看：
              </ByText>
              <ByText size="sm" type={source.mkNo ? "success" : "warning"}>
                {source.mkNo ? "已" : "未"}绑定
              </ByText>
            </View>

            <ByIcon
              name="Phone"
              size={46}
              className="text-primary"
              onClick={(event) => {
                event.stopPropagation();
                Taro.makePhoneCall({ phoneNumber: source.mobileTelephone });
              }}
            />
          </ByRow>
        </View>
      </Card>
    </View>
  );
};
